<template>
    <div class="system-role-container-home">

        <el-card shadow="hover" class="mb10  ">
            <div class="system-user-search-home">
                <div>
                    <el-form :model="paramSearch" label-width="150px">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="所属账号：">
                                <el-select v-model="paramSearch.type" placeholder="请选择所属账号" size="small"
                                    style="width: 180px" class="ml10">
                                    <el-option label="中心社" value="0"></el-option>
                                    <el-option label="分社" value="1"></el-option>
                                    <el-option label="高校" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="所属地区：">
                                <el-select :disabled="regionDisableStatus" v-model="paramSearch.region" filterable placeholder="请选择所属地区" size="small"
                                    style="width: 180px" class="ml10">
                                    <el-option v-for="(item,index) in regionList" :key="item.code " :label="item.name"
                                        :value="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="所属高校：">
                                <el-input :disabled="schoolNameDisableStatus" v-model="paramSearch.schoolName" placeholder="请输入所属高校"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="状态：">
                                <el-select v-model="paramSearch.status" placeholder="请选择状态" size="small"
                                    style="width: 180px" class="ml10">
                                    <el-option label="关闭" value="0"></el-option>
                                    <el-option label="开启" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                    </el-form>
                </div>
                <div style="display: flex;justify-content: end;">
                  <el-button class="ml10" @click="searchClear">重置 </el-button>
                  <el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: end">
              <el-button style="margin: 10px 0; transform: translateX(2px);" class="ml10 btn_bgc" type="primary" @click="onOpenAddRole">新增</el-button>
            </div>
          </template>
            <el-table
                    :data="tableData.data"
                    height="calc(100vh - 180px )"
                    style="width: 100%"
                    :header-cell-style="{ background: '#EEEEEE', }"
            >
                <el-table-column prop="type" label="所属账号" align="center">
                    <template #default="scope">
                        <span  v-if="scope.row.type===0">中心社</span>
                        <span  v-if="scope.row.type===1">分社</span>
                        <span  v-if="scope.row.type===2">高校</span>
                    </template>
                </el-table-column>
                <el-table-column prop="regionName" label="所属地区"  align="center"></el-table-column>
                <el-table-column prop="schoolName" label="所属高校" align="center">
                    <template #default="scope">
                     <p class="home-p-index">{{scope.row.schoolName}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="xlccName" label="学历层次" align="center">
                    <template #default="scope">
                        <p class="home-p-index">{{scope.row.xlccName}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="账号"  align="center"></el-table-column>
                <el-table-column prop="createUser" label="创建人" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
                        <el-tag type="info" v-if="scope.row.status===0">禁用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="240" align="center">
                    <template #default="scope">
                        <el-button  size="mini" type="success" @click="onOpenEditRole(scope.row)">修改</el-button>
                        <el-button  size="mini" type="danger" @click="onRowDel(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.type === 0" size="mini" type="warning" @click="onRowUpdata(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[15, 40, 45]"
                    v-model:current-page="paramSearch.current"
                    background
                    v-model:page-size="paramSearch.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef" @update="add" :selectData="selectData" />
        <EditRole ref="editRoleRef"  @update="Edit"  />
        <el-dialog v-model="showDing" title="重置密码" width="30%" center>
            <div style="text-align: center">
                <span style="margin-right: 10px">重置密码:</span>
                <el-input v-model="newPassWord" placeholder="请输入新的密码" style="width: 260px;" />
            </div>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDing = false">关闭</el-button>
        <el-button type="primary" @click="resetNewpassWord">重置</el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, watch} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddRole from './component/addRole.vue';
import EditRole from './component/editRole.vue';
import { regionGet, userList, userAdd ,userEdit,deleteRow,resetNewPass} from '../../api/home/index'
// import { Edit } from '@element-plus/icons-vue/dist/types';

export default {
    name: 'studentIndex',
    components: { AddRole, EditRole },
    setup() {
        const addRoleRef = ref();
        const editRoleRef = ref();
        const state: any = reactive({
            newPassWord:'',
            showDing:false,
            tableData: {
                data: [],
                loading: false,
            },
            paramSearch: {
                current: 1,
                size: 15,
                type: '',
                region: '',
                schoolName: '',
                status: '',
            },
            pageSize:'',
            pageNum:'',
            total: 0,
            regionList: [],
            rowList:[],
          schoolNameDisableStatus: false,
          regionDisableStatus: false,
        });
        // 打开新增角色弹窗
        const onOpenAddRole = () => {
            addRoleRef.value.openDialog();
        };
        // 打开修改角色弹窗
        const onOpenEditRole = (row: Object) => {
            editRoleRef.value.openDialog(row);
        };
        const add = async (oldRow:any) => {
                const res = await userAdd(oldRow);
                if (res.code === 200) {
                    ElMessage.success('添加成功');
                    addRoleRef.value.closeDialog();
                    initUserList();
                }

        };
        //重置密码
        const onRowUpdata = (row:any)=>{
            console.log(row)
            state.rowList = JSON.parse(JSON.stringify(row))
            state.showDing = true
        }
        const resetNewpassWord = () =>{
            ElMessageBox.confirm(
                '您将重置该用户密码?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true,
                }
            )
                .then(() => {
                    const params ={
                        id :state.rowList.id,
                        newPassword :state.newPassWord
                    }
                    resetNewPass(params).then((res:any)=>{
                        ElMessage({
                            type: 'success',
                            message: '重置成功,请重新登录',
                        })
                        state.showDing = false
                    })
                })
        }
        const Edit=async (oldRow:any)=>{
            console.log(oldRow,222222);
            const res = await userEdit(oldRow);
            if (res.code === 200) {
                ElMessage.success('修改成功');
                editRoleRef.value.closeDialog();
                initUserList();
            }
        }


        // 删除角色
        const onRowDel = (row: object) => {
            const rowList = JSON.parse(JSON.stringify(row))
            ElMessageBox.confirm(`此操作将永久删除角色名称：“${rowList.name}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const params ={
                        id:rowList.id
                    }
                    deleteRow(params).then((res:any)=>{
                        if(res.code === 200){
                            ElMessage.success('删除成功');
                            initUserList()
                        }
                    })

                })
                .catch(() => { });
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.pageSize = val;
            initUserList()
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.pageNum = val;
            initUserList()
        };
        //获取地区列表
        const initRegion = () => {
            regionGet({}).then((res) => {
                state.regionList = res.data
            })
        }
        //获取用户列表
        const initUserList = () => {
            let params = { ...state.paramSearch}
            userList(params).then((res) => {
                state.paramSearch.size = res.data.size
                state.tableData.data = res.data.records;
                state.total = res.data.total;
                //     state.tableData.data = data;
                // state.tableData.total = state.tableData.data.length;
            })
        }
        //查询
        const search = () => {
            const params = {...state.paramSearch}
            userList(params).then((res) => {
                state.paramSearch.size = res.data.size
                state.tableData.data = res.data.records;
                state.total = res.data.total;
            })
        }
        //重置
        const searchClear = () => {
            state.paramSearch={}
            userList(state.paramSearch).then((res) => {
                state.paramSearch.size = res.data.size
                state.tableData.data = res.data.records;
                state.total = res.data.total;
            })
        }
        // 页面加载时
        onMounted(() => {
            initRegion()
            initUserList()

        });
        watch(() => state.paramSearch.type, (value) => {
          if (value.toString() === '0') {
            state.regionDisableStatus = true;
            state.schoolNameDisableStatus = true;
            state.paramSearch.region = '';
            state.paramSearch.schoolName = '';
          } else {
            state.regionDisableStatus = false;
            state.schoolNameDisableStatus = false;
          }
        })
        return {
            addRoleRef,
            editRoleRef,
            resetNewpassWord,
            onRowUpdata,
            onOpenAddRole,
            onOpenEditRole,
            onRowDel,
            onHandleSizeChange,
            onHandleCurrentChange,
            add,
            Edit,
            search,
            searchClear,
            ...toRefs(state),
        };
    },
};
</script>

<style lang="scss">
.system-role-container-home {
  .el-card__header {
    height: auto!important;
    min-height: 45px!important;
  }
}
.system-user-search-home {
    display: flex;
    flex-direction: column;

    // justify-content: end;
    .btn_bgc {
        background: #D84436;
        border: none;

    }

}
    .home-p-index{
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;
    }
</style>
